<template>
  <div>
    <van-nav-bar
      title="潜在客户"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-search
      placeholder="请输入客户名称"
      @search="search"
      v-model="queryParam[0].Keyword"
      @clear="clear"
    />
    <!-- @click="Edit(item)" -->
    <div class="outerBox">
      <div class="potentialbox" v-for="item in data" :key="item.Id">
        <div class="Father">
          <div class="companyName">{{ item.cCusName }}</div>
          <div class="cCusPhone">
            <div style="padding-right:30px">
              联系人:{{ item.cCusPerson ? item.cCusPerson : "无" }}
            </div>
            <div>电话:{{ item.cCusPhone }}</div>
          </div>
          <div class="address">地址:{{ item.cCusAddress }}</div>
        </div>
      </div>
    </div>

    <PaginationCom :pagination="pagination" :Total="Total" :thisOjb="this" />
  </div>
</template>

<script>
import PaginationCom from "../../components/PaginationCom.vue";
import { Card } from "vant";
import { Search, NavBar, Pagination } from "vant";

export default {
  components: {
    PaginationCom,
    "van-pagination": Pagination,
    "van-nav-bar": NavBar,
    "van-card": Card,
    "van-search": Search
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 15,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ["15", "30", "60"], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      Total: 0,
      Keyword: "",
      data: [],
      queryParam: [{ condition: "cCusName" }]
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    paginationchange(a, b) {
      // a:当前选中页码
      this.pagination.current = a;
      this.getDataList();
    },
    clear() {
      this.queryParam = [];
      this.getDataList();
    },

    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$refs.edit.openForm();
    },
    //弹出页面
    Edit(item) {
      this.$router.push({
        path: "/myoption",
        query: { cCusName: item.cCusName, cCusCode: item.cCusCode }
      });
      // this.$refs.edit.openForm(Id);
    },
    //搜索
    search(value) {
      console.log(value);
      this.queryParam.Condition = "CustomerName";
      this.queryParam.Keyword = value;
      this.getDataList();
    },

    getDataList() {
      this.selectedRowKeys = [];

      this.loading = true;
      this.http
        .post(
          "/CustomerManagement/Cust_CustomerInfoPotential/GetDataListByMoreCondition",
          {
            PageIndex: this.pagination.current,
            PageRows: this.pagination.pageSize,
            SortField: "Id",
            SortType: "asc",
            Search: this.queryParam
          }
        )
        .then(resJson => {
          this.data = resJson.Data;
          this.Total = resJson.Total;
          // console.log(this.data);
        });
    }
  }
};
</script>

<style scoped>
.address {
  margin-left: 10px;
  padding-bottom: 10px;
}
.pagination {
  position: absolute;
  bottom: 5px;
  right: 20%;
}
.cCusPhone {
  display: flex;
  justify-content: flex-start;
  margin-left: 10px;
}
.outerBox {
  /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; */
  height: calc(100vh - 150px);
  padding-bottom: 60px;
  box-sizing: border-box;
  /* height: 650px; */
  overflow: auto;
  /* text-align: center; */
}
.companyName {
  margin-left: 10px;
  padding-top: 5px;

  font-size: 18px;
}
.potentialbox {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  width: 95%;

  margin: 0 auto;

  margin-bottom: 10px;
}
img {
  width: 100px;
  height: 100px;
}
.Father {
  /* display: flex; */
}
</style>
